<template>
    <div class="ShopList">
      <ul>
        <Li v-for="(item,index) in ShopList" :key="index">
            <router-link :to='"/Details/" + index'>
            <div class="ShopListImg"><img :src="item.img" alt=""></div>
            <div class="ShopListText">
              <div class="name">
                <span>{{item.name}}</span>
                
              </div>
              <div class="price" :class="item.pic?'p':''">
                <span style="color: #fa2c19;">{{item.price}}</span>
                <span v-if="item.pic" class="pic">{{item.pic}}</span>
                <span style="background-color:#f0f2f5;color: grey; font-size: 0.75rem;padding: 0.125rem 0.3125rem;border-radius: 0.625rem;padding-bottom: 0.3125rem" v-if="item.title">{{item.title}}</span>
              </div>
            </div>
          </router-link>
        </Li>
      </ul>
      <div class="ShopList-footer">点击继续加载</div>
    </div>
</template>

<script>
export default {
  name: "ShopList",
  data:()=>({
    ShopList:[]
  }),
  mounted() {
       
         let that=this;
         //console.log(that.$route.path);
         let url='http://localhost:5000';
         if(that.$route.path=='/index'){
            this.$http.get(url+'/data/ShopList.json')
        .then(function (response) {
        //  console.log(response);
         
             that.ShopList=response.data.ShopList.map(i=>({
            img: url + i['img'],
            name:i['name'],
            price:i['price'],
            title:i['title']
            }));
           }) 
           .catch(function (error) {
           console.log(error);
            })
        .then(function () {
          // always executed
        });
         }
        if(that.$route.path=='/My'){
          this.$http.get(url+'/data/MyShop.json')
        .then(function (response) {
          //console.log(response);
         
             that.ShopList=response.data.ShopList.map(i=>({
            img: url + i['img'],
            name:i['name'],
            price:i['price'],
            pic:i['title']
            }));
           }) 
           .catch(function (error) {
           console.log(error);
            })
          .then(function () {
          // always executed
          });
        }

          
         

       
       
  }
}
</script>
<style scoped>
a{
  text-decoration: none;
  display: inline-block;
}
.ShopList{
  width: 22.1875rem;
  margin: 0px auto;
 padding-bottom: .5rem;
}
.ShopList ul{
  padding-bottom: 0.625rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ShopList ul li{
  width: 10.8125rem;
  height: 16.5rem;
  background-color: #fff;
  border-radius: 0.625rem;
  overflow: hidden;
  margin:0.3125rem  0;
}
.ShopListImg{
  width: 10.8125rem;
  height: 10.8125rem;

}
.ShopListImg img{
  width: 100%;
}
.ShopListText{
  height: calc(16.5rem - 10.8125rem);
}
.name{
  height:1.9375rem ;


  font-size: 0.75rem;
}
.name span{
  box-sizing: border-box;
  height: 1.9375rem;
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  color: #1a1a1a;
  margin-top: 0.3125rem;
  line-height: 1rem;
  margin-bottom: 0.1875rem;
  padding: 0 0.25rem;
  letter-spacing: 0.09375rem;
}
.price{
  width: 100%;
  padding-top: 0.625rem;
  display: flex;
  justify-content: space-between;
 
}
.ShopList-footer{
  border-top: 1px solid #e5e5e5;
  padding: 0.625rem 0;
  text-align: center;
  font-size: 0.875rem;
  color: #686868;
}
.pic{
  position: relative;
  font-size: .625rem;
  color: #e4393c;
  padding: 0rem .1875rem;
  text-align: left;
  margin-left:.625rem;
}
.pic:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    border-radius: .125rem;
    border: .0625rem solid #e4393c;
}
.p{
  display: flex;
  justify-content: left;
}
</style>